<template>
    <div class="chart" id="oneChart"></div>
    
  </template>
  
  <script>
  import { inject, onMounted, reactive } from "vue";
  
  import emitter from '../bus'
  export default {
    setup() {
      // 引入echarts
      let $echarts = inject("echarts");
      let $http = inject("axios")
      // 数据接收
      let oneData = reactive({});
      let site = reactive([]);
      let mouth = reactive([]);
      let AQI = reactive([]);
      function setData() {
        site = oneData.data.map((v) => v.站点)
        mouth = oneData.data.map((v) => v.月)
        site = Array.from(new Set(site))
        mouth = Array.from(new Set(mouth))

        const map ={
                '站点':'站点',
                '月':'月',
                'aqi':"aqi"
            }
        const header= Object.keys(oneData.data[0]).map(item=>{
            return map[item]
        })
        AQI =oneData.data.map(obj=>{
          return  Object.values(obj)
        })
        console.log(site);
        console.log(mouth);
        console.log("数据：",AQI);
        console.log(header);
      }
      async function getState() {
        oneData = await $http({ url: "/siteaqi/site-aqi" });
      }
      onMounted(() => {
        // 初始化echarts
        let myChart = $echarts.init(document.getElementById("oneChart"));
        getState().then(() => {
          setData();
          myChart.setOption({
            tooltip: {},
          title: 
          {
            text: '站点-月份-AQI-平均指数',
            left: 'center',
            top: '8%',
            triggerEvent: true,
            textStyle:{
                  color: 'bisque'//字体颜色
                },
          },
            visualMap: {
              max: 150,
              inRange: {
                color: [
                  '#313695',
                  '#4575b4',
                  '#74add1',
                  '#abd9e9',
                  '#e0f3f8',
                  '#ffffbf',
                  '#fee090',
                  '#fdae61',
                  '#f46d43',
                  '#d73027',
                  '#a50026'
                ]
              }
            },
            xAxis3D: {
              type: 'category',
              data: mouth,
              name:'月份',
            },
            yAxis3D: {
              type: 'category',
              data: site,
              name:'站点',
            },
            zAxis3D: {
              type: 'value',
              name:'AQI',
            },
            grid3D: {
              boxWidth: 200,
              boxDepth: 80,
              light: {
                main: {
                  intensity: 1.2
                },
                ambient: {
                  intensity: 0.3
                }
              }
            },
            series: [
              {
                type: 'bar3D',
                data: AQI.map(function (item) {
                  return {
                    value: [item[1], item[0], item[2]]
                  };
                }),
                shading: 'color',
                label: {
                  show: false,
                  fontSize: 16,
                  borderWidth: 1
                },
                itemStyle: {
                  opacity: 0.4
                },
                emphasis: {
                  label: {
                    fontSize: 20,
                    color: '#900'
                  },
                  itemStyle: {
                    color: '#900'
                  }
                }
              }
            ]
          });
          window.onresize = myChart.resize;
          myChart.on("click", params => {
            if(params.componentType && params.componentType === "title"){
              window.location.href = 'http://1.15.157.25:8880/'
            }
            console.log(params.data.value[1])
            console.log(params.data.value[0])
            emitter.emit("site", params.data.value[1])
            emitter.emit("mouth",params.data.value[0])
            emitter.emit("linemouth",params.data.value[0])

            })
        });
      });
      return {
        getState,
        oneData,
        site,
        mouth,
        AQI,
        setData,
      };
    },
  };
  </script>
  
  <style scoped>
  .chart {
    height: 420px;
  }
  .el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
  </style>